<script setup>
import {Delete, Edit} from '@element-plus/icons-vue'
import {onMounted, ref} from 'vue'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import {ElMessage} from "element-plus";
import {addUserAPI, getUserListAPI} from "@/api/user.js";
import moment from "moment";

//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
  limit.value = size
  getUserList()
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
  page.value = num
  getUserList()
}

// 页码
const page = ref(1)
// 每页条数
const limit = ref(5)
// 用户详情信息
const userList = ref([])
// 用户总数
const total = ref(0)
/**
 * 分页获取文章列表
 * @returns {Promise<axios.AxiosResponse<any>>}
 */
const getUserList = async () => {
  const result = await getUserListAPI(page.value, limit.value)
  console.log(result)
  userList.value = result.data.data.rows
  total.value = result.data.data.count
}

// 控制抽屉是否显示
const visibleDrawer = ref(false)
// 单篇文章信息详情
const userModel = ref({
  id: 0,
  code: '',
  password: '',
  name: "",
  phone: "",
  email: "",
  avatar: "",
  gender: null,
  graduationYear: "",
  idNumber: "",
  role: null,
  major: ""
})


/**
 * 添加用户
 * @returns {Promise<void>}
 */
const addUser = async () => {
  userModel.value.graduationYear = moment(userModel.value.graduationYear).format('YYYY-MM-DD')
  const result = await addUserAPI(userModel.value)
  console.log(result)
  result.data?.code === 0 ? ElMessage.success("更新成功") : ElMessage.warning(result.data?.msg)
  await getUserList()
  visibleDrawer.value = false
}

onMounted(() => {
  getUserList()
})
</script>
<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>校友管理</span>
        <div class="extra">
          <el-button type="primary" @click="visibleDrawer=true">添加校友</el-button>
        </div>
      </div>
    </template>
    <!-- 文章列表 -->
    <el-table border :data="userList" style="width: 100%"
              :default-sort="{ prop: 'graduationYear', order: 'descending' }">
      <el-table-column label="序号" align="center" width="100" type="index"></el-table-column>
      <el-table-column label="姓名" align="center" width="200" prop="name"></el-table-column>
      <el-table-column label="头像" align="center" prop="avatar">
        <template #default="{row}">
          <el-avatar shape="square" :size="50" :src="row.avatar"/>
        </template>
      </el-table-column>
      <el-table-column label="毕业时间" align="center" sortable prop="graduationYear">
        <template #default="{row}">
          {{ row.graduationYear }}
        </template>
      </el-table-column>
      <el-table-column label="身份" align="center">
        <template #default="{ row }">
          {{ row.role === 0 ? '学士' : row.role === 1 ? '硕士' : '博士' }}
        </template>
      </el-table-column>
      <el-table-column label="专业" align="center" sortable prop="major"></el-table-column>
      <el-table-column label="操作" width="200" align="center">
        <template #default="{ row }">
          <el-button @click="editArticle(row.id)" :icon="Edit" circle plain type="primary"></el-button>
          <el-button :icon="Delete" circle plain type="danger"></el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据"/>
      </template>
    </el-table>
    <!-- 分页条 -->
    <el-pagination v-model:current-page="page" v-model:page-size="limit" :page-sizes="[3, 5 ,10, 15]"
                   layout="jumper, total, sizes, prev, pager, next" background :total="total"
                   @size-change="onSizeChange"
                   @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end"/>
    <!-- 抽屉 -->
    <el-drawer v-model="visibleDrawer" title="添加校友" direction="rtl" size="50%">
      <!-- 添加用户表单 -->
      <el-form :model="userModel" label-width="80px" style="padding: 0 20px">
        <el-form-item label="学号">
          <el-input v-model="userModel.code" placeholder="请输入学号"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="userModel.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="userModel.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="userModel.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="userModel.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item label="头像">
          <el-input v-model="userModel.avatar" placeholder="请输入头像"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select style="width: 695.46px" placeholder="请选择" v-model="userModel.gender">
            <el-option
                v-for="c in [{ id: 0, name: '男' }, { id: 1, name: '女' }]"
                :key="c.id"
                :label="c.name"
                :value="c.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="毕业时间">
          <el-date-picker
              v-model="userModel.graduationYear"
              style="width: 695.46px"
              type="date"
              placeholder="请选择毕业日期"
          />
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="userModel.idNumber" placeholder="请输入身份证号"></el-input>
        </el-form-item>
        <el-form-item label="身份">
          <el-select style="width: 695.46px" placeholder="请选择" v-model="userModel.role">
            <el-option
                v-for="c in [{ id: 0, name: '学士' }, { id: 1, name: '硕士' }, { id: 2, name: '博士' }]"
                :key="c.id"
                :label="c.name"
                :value="c.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="专业">
          <el-input v-model="userModel.major" placeholder="请输入专业"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addUser">更新</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </el-card>
</template>
<style lang="scss" scoped>
.page-container {
  min-height: 100%;
  box-sizing: border-box;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

/* 抽屉样式 */
.avatar-uploader {
  :deep(.avatar) {
    width: 178px;
    height: 178px;
    display: block;
  }

  :deep(.el-upload) {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  :deep(.el-upload:hover) {
    border-color: var(--el-color-primary);
  }

  :deep(.el-icon.avatar-uploader-icon) {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
  }

}

.editor {
  width: 100%;

  :deep(.ql-editor) {
    min-height: 200px;
  }
}

.editor {
  width: 100%;

  :deep(.ql-editor) {
    min-height: 200px;
  }
}
</style>